<template>
	<up-popup v-model:show="show" :round="100">
		<view class="content">
			<image src="@/static/pro-detail-bg.png" mode="widthFix" class="proBg"></image>
			<view class="closeIcon" @click="show = false">
				<image src="@/static/arrow-left.png" mode="widthFix"></image>
			</view>

			<view class="mainImage center">
				<image :src="detailInfo.image" mode="widthFix"></image>
			</view>

			<view class="listTitle">选择风格：</view>
			<view class="list center">
				<view class="list-item column" v-for="(item, index) in productList" :key="index" @click="selectPorduct(item.id)">
					<view class="sel-icon" v-if="selectPorductList.indexOf(item.id) > -1">
						<image src="@/static/pro-sel-icon.png" mode="widthFix"></image>
					</view>
					<view class="list-item-image center">
						<image :src="item.image" mode="widthFix"></image>
					</view>
					<view class="list-item-name">{{ item.name }} x 1</view>
				</view>
			</view>

			<view class="row-between title">
				<view>{{ detailInfo.name }}</view>
				<!-- <view class="row">
					<image src="@/static/duihao.png" mode="widthFix"></image>
					<text>广州动物园</text>
				</view> -->
			</view>
			<view class="des">{{ detailInfo.content }}</view>

			<view class="NumberPeople row">
				<text>{{ detailInfo.count }} 人</text>
				<image src="@/static/shoucang.png" mode="widthFix"></image>
			</view>

			<view class="confirm-btn center" hover-class="hoverClass" hover-stay-time=".3s" @click="toPhoto">确认选择风格</view>
		</view>
	</up-popup>
</template>

<script setup>
import { http } from 'uview-plus';
import { ref } from 'vue';
import base from '@/utils/index.js';

const show = ref(false);
const detailInfo = ref({});
const productList = ref([]);

const selectPorductList = ref([]);

function toPhoto() {
	if (selectPorductList.value.length == 0) {
		uni.showToast({
			title: '请选择风格',
			icon: 'none'
		});
		return;
	}

	base.navigateTo('/pages/makePhoto/index?templateId=' + detailInfo.value.id + '&type=add&productList=' + JSON.stringify(selectPorductList.value));
	// let url = ['https://instant-pix.oss-cn-shenzhen.aliyuncs.com/1755456348032_epii_tmp_1755455174355.jpg'];
	// uni.navigateTo({
	// 	url: '/pages/makePhoto/preview?previewImage=' + JSON.stringify(url) + '&templateId=' + detailInfo.value.id
	// });
}

function selectPorduct(id) {
	let index = selectPorductList.value.indexOf(id);
	if (index > -1) {
		selectPorductList.value.splice(index, 1);
	} else {
		selectPorductList.value.push(id);
	}
}

async function init(item) {
	detailInfo.value = item;
	show.value = true;
	const { data } = await http.get(`/open/api/index/selectAllByTemplateId/${item.id}`, {});
	productList.value = data;
}

defineExpose({ init });
</script>

<style lang="scss" scoped>
.content {
	width: 100vw;
	padding-bottom: 5vw;
	border-radius: 7vw 7vw 0 0;
	position: relative;
	height: 80vh;
	overflow-y: scroll;

	.proBg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.closeIcon {
		width: 12vw;
		height: 12vw;
		position: absolute;
		top: 3vw;
		left: 3vw;
		z-index: 20;
		image {
			width: 100%;
			height: 100%;
		}
	}

	.mainImage {
		width: 100vw;
		height: 115vw;
		overflow: hidden;
		position: relative;
		z-index: 10;
		border-radius: 7vw;

		image {
			width: 100vw;
			box-shadow: 10vw 10vw 10vw 0 rgba(0, 0, 0, 0.25);
		}
	}

	.title {
		margin-top: 5vw;
		padding: 0 5vw;
		position: relative;
		z-index: 10;

		view:first-of-type {
			font-weight: bold;
			font-size: 5vw;
			color: #030101;
			line-height: 7vw;
		}
		// view:last-of-type {
		// 	image {
		// 		width: 17rpx;
		// 		height: 12rpx;
		// 	}
		// 	text {
		// 		font-weight: 500;
		// 		font-size: 26rpx;
		// 		color: #000000;
		// 		margin-left: 10rpx;
		// 	}
		// }
	}

	.des {
		margin-top: 1vw;
		padding: 0 5vw;
		font-size: 3vw;
		color: #030101;
		position: relative;
		z-index: 10;
		line-height: 4vw;
	}

	.NumberPeople {
		z-index: 99;
		text {
			font-size: 3vw;
			color: #000000;
		}

		image {
			width: 4vw;
			margin-left: 3vw;
		}
	}
}

.confirm-btn {
	width: 91vw;
	height: 12vw;
	background: #ffffff;
	border-radius: 6vw 6vw 6vw 6vw;
	position: absolute;
	bottom: 5vw;
	left: 50%;
	transform: translateX(-50%);
	z-index: 999;
	font-weight: bold;
	font-size: 4vw;
	color: #000000;
}

.listTitle {
	font-weight: bold;
	font-size: 4vw;
	color: #4e3d11;
	position: relative;
	z-index: 10;
	margin-top: 3vw;
	width: 100vw;
	padding-left: 5vw;
}
.list {
	width: 100vw;
	margin-top: 2vw;
	display: flex;
	position: relative;
	z-index: 10;

	.list-item {
		margin-left: 5vw;
		position: relative;

		.sel-icon {
			position: absolute;
			right: 3vw;
			top: 3vw;
			width: 5vw;
			height: 5vw;
			border-radius: 50%;
			z-index: 10;
			image {
				width: 100%;
				height: 100%;
			}
		}

		.list-item-image {
			width: 22vw;
			height: 22vw;
			border-radius: 50%;
			overflow: hidden;
			image {
				width: 22vw;
			}
		}
		.list-item-name {
			font-weight: 500;
			font-size: 3vw;
			color: #4e3d11;
			margin-top: 2vw;
		}
	}

	.list-item-sel {
		.list-item-image {
			border: 2px solid #ffd000;
		}
	}

	.list-item:first-of-type {
		margin-left: 0;
	}
}
</style>
